<template>
  <div id="header" onselectstart="return false;">
      <el-row>
        <el-col :span="6" class="left-log">
          <a class="link-log" href="">
            <h1 class="log"></h1>
          </a>
        </el-col>
        <el-col :span="18">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
          >
            <el-menu-item
              v-for="item in tablist"
              :key="item.id"
              :index="item.id.toString()"
              @click="onActive(item.routes.path)"
              >{{ item.title }}</el-menu-item
            >
          </el-menu>
        </el-col>
      </el-row>
  </div>
</template>

<script>
import PageConfig from './config';
export default {
  data() {
    return {
      tablist: PageConfig.tablist,
      activeIndex: '1',
    };
  },
  methods: {
    onActive(path) {
      this.$router.push(path);
    },
  },
};
</script>

<style lang="scss" scoped>
$top-color: #c20c0c;
#header {
  width: 100%;
  background: #242424;
  color: #fff;
  border-bottom: 5px solid $top-color;
  .left-log {
    height: 60px;
    .log {
      background: url('~@/assets/images/topbar.png') no-repeat center;
      background-position: 15px -5px;
      margin: 0 auto;
    }
  }
  a.link-log {
    width: 100%;
    height: 100%;
  }
  .log {
    width: 200px;
    height: 100%;
  }
  .el-menu-demo {
    background: #242424;
  }
  ::v-deep .el-menu--horizontal > .el-menu-item {
    color: #ccc;
    font-size: 16px;
    background: inherit;
  }
  ::v-deep .el-menu.el-menu--horizontal {
    border: none;
  }
  /deep/ .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
  .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
  .el-menu--horizontal > .el-submenu__title:hover {
    background-color: #000;
    color: #fff;
  }
  ::v-deep .el-menu--horizontal > .el-menu-item.is-active {
    position: relative;
  }
  ::v-deep .el-menu--horizontal > .el-menu-item.is-active::after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 0;
    width: 0;
    margin: auto;
    border-top: solid 5px transparent;
    border-left: solid 5px transparent;
    border-right: solid 5px transparent;
    border-bottom: solid 5px $top-color;
  }
  ::v-deep .el-menu--horizontal > .el-menu-item.is-active {
    border: none;
    background: #000;
    color: #fff;
  }
}
</style>
